<template>
    <div>
        <el-dialog title="选择角色" v-model="dialogSelectRole" width="30%" >

            <div id="areaTree">
                <div class="tree-box">
                    <div class="zTreeDemoBackground left">
                        <ul id="treeSelect" class="ztree"></ul>
                    </div>
                </div>
            </div>
            <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="cancel">取 消</el-button>
                      <el-button type="primary" @click="saveMenus">确 定</el-button>
                    </span>
            </template>
        </el-dialog>
    </div>

</template>

<script>
    import {postReq} from "../../../utils/api";
    import $ from 'jquery'
    import '@ztree/ztree_v3/js/jquery.ztree.core.min.js'
    import '@ztree/ztree_v3/js/jquery.ztree.excheck.min.js'
    import '@ztree/ztree_v3/css/metroStyle/metroStyle.css'
    export default {
        name: "SysRoleRelMenu",
        components:{},
        mounted() {
        },
        data(){
            return{
                setting:{
                    check:{
                        enable: true,
                        chkboxType: { 'Y': 'ps', 'N': 's' }
                    },
                    data:{
                        simpleData:{
                            enable: true,
                            idKey: "id",
                            pIdKey: "parentId"
                        }
                    },
                    callBack:{
                        onCheck:this.onCheck
                    }
                },
                zNodes:[],
                dialogSelectRole:false,
                data: [],
                formObj:{
                    uid:undefined
                },
                nodeIds :[],
                names :[]
            }
        },
        methods:{
            open(id){
                if (undefined!==id){
                    this.formObj.uid = id
                }
                this.dialogSelectRole = true
                this.initTree(this.formObj)
            },
            initTree(data){
                this.getMenuRelRole(data)
            },

            getMenuRelRole(data){
                postReq('/api/sys_role/list_role_for_user',data).then(res=>{
                    this.zNodes = res.data.data
                    $.fn.zTree.init($("#treeSelect"), this.setting, this.zNodes);
                })
            },

            onCheck(e,treeId,treeNode){
                let treeObj=$.fn.zTree.getZTreeObj("treeSelect"), nodes=treeObj.getCheckedNodes(true);
                let nodeIds = []
                let names = []
                for(let i=0;i<nodes.length;i++){
                    nodeIds[i]=nodes[i].id
                    names[i]=nodes[i].name
                }
                this.nodeIds = nodeIds
                this.names = names
            },
            saveMenus(){
                this.onCheck()
                if (this.nodeIds.length>0){
                    this.$emit('callBack', {ids:this.unique(this.nodeIds),name:this.names})
                }
                this.dialogSelectRole = false
            },
            unique(arr) {
                let s  = new Set(arr);
                // Array.from : 将set数据结构转成真正的数组；
                return  Array.from(s)
            },
            cancel(){
                this.dialogSelectRole = false
            }
        }
    }
</script>

<style scoped>

</style>